<template>
    <div class="ProCessItemWrap">
        <div class="ProCessItemWrap-item" v-if="type == 'bar'">
            <Bar :cardItem="cardItem" :data="formData" :type="type"></Bar>
        </div>
        <div class="ProCessItemWrap-item" v-else-if="type == 'barDoub'">
            <BarDoub :cardItem="cardItem" :data="formData" :type="type" :extraData="extraData"></BarDoub>
        </div>
        <div class="ProCessItemWrap-item" v-else-if="type == 'table'">
            <TableWrite :cardItem="cardItem" :items="items" :type="type" :processData="processData"></TableWrite>
        </div>
        <div class="ProCessItemWrap-item" v-else-if="type == 'strip'">
            <Strip :cardItem="cardItem" :data="formData" :type="type" :processData="processData"></Strip>
        </div>
        <div class="ProCessItemWrap-item" v-else-if="type == 'tableList'">
            <TableList :cardItem="cardItem" :dataList="formData" :type="type" :processData="processData"></TableList>
        </div>
    </div>
</template>

<script>
import Bar from './Charts/bar.vue';
import BarDoub from './Charts/barDoub.vue';
import TableWrite from './Charts/TableWrite.vue';
import Strip from './Charts/strip';
import TableList from './Charts/TableList.vue';

export default {
    name: 'ProCessItem',
    components: {
        Bar,
        TableWrite,
        Strip,
        TableList,
        BarDoub,
    },
    props: {
        items: {
            type: [Object, Array],
        },
        type: {
            type: String,
        },
        processData: {
            type: Object,
        },
        cardItem: {
            type: Object,
        },
        extraData: {
            type: [Object, Array],
        }

    },
    mounted() {
    },
    computed: {
        formData() {
            let res = [];
            if (['bar', 'strip', 'barDoub'].includes(this.type)) {
                res = this.items.map(v => {
                    return {
                        ...v,
                        label: v.name,
                        name: v.name,
                        value: v.num || v.value
                    }
                })
            }
            return res;
        }
    }
}
</script>

<style lang="less" scoped>
.ProCessItemWrap {
    width: 100%;
    height: 100%;

    &-item {
        width: 100%;
        height: 100%;
    }
}
</style>